<template>
  <div class="contentWeb clear">
    <div class="member_menu">
      <Personleft active="skill" />
    </div>
    <div class="member_right ">
      <div class="personTengt">
        <Memtitle name="培训经历" />
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="180px"
          style="margin-top: 20px;"
        >
          <el-form-item label="时间" prop="startTime" style="display:inline-block">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              v-model="form.startTime"
              style="margin-right: 10px;"
            >
            </el-date-picker>
          </el-form-item>
            -
          <el-form-item prop="endTime" label-width="0" style="display:inline-block">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              v-model="form.endTime"
              style="margin-left: 10px;"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="培训单位" prop="title">
            <el-input
              placeholder="请输入培训单位"
              v-model="form.title"
              style="width: 70%;"
            />
          </el-form-item>
          <el-form-item required label="培训内容" prop="trainingContent">
            <el-input
              type="textarea"
              v-model="form.trainingContent"
              rows="5"
              style="width: 70%"
              placeholder="请输入培训内容"
            />
          </el-form-item>
          <el-form-item style="margin-top: 40px">
            <el-button
              style="background: #20a2b2; width: 300px; border: 0; margin-left: 150px;"
              type="primary"
              @click="onSubmit"
              >保存
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script type="text/babel">
// @ is an alias to /src

import Memtitle from '../../components/memtitle'
import Personleft from '../../components/personleft'
import {
  CVTrainingById,
  cvTraningAdd,
  updateTraining
} from '../../assets/js/domains'
import { FormItem } from 'element-ui'

export default {
  name: 'skillTrain',
  components: {
    Personleft,
    Memtitle
  },
  directives: {},
  data: function () {
    return {
      form: {
        endTime: '',
        startTime: '',
        title: '',
        trainingContent: ''
      },
      rules:{
        startTime:[
          { required: true, message: '选择日期', trigger: 'change' },
        ],
        endTime:[
          { required: true, message: '选择日期', trigger: 'change' },
        ],
        title:[
          { required: true, message: '请输入培训单位', trigger: 'blur' },
          { validator: this.validSensWords, trigger: 'blur' }
        ],
        trainingContent:[
          { required: true, message: '请输入培训内容', trigger: 'blur' },
          { validator: this.validSensWords, trigger: 'blur' }
        ]
      }
    }
  },
  created: function () {
    document.documentElement.scrollTop = document.body.scrollTop = 0
    this.form.userUid = localStorage.getItem('md_user_uid')
  },
  computed: {},
  mounted: function () {
    if (this.$route.query.id) {
      this.form.id = this.$route.query.id
      this.getpost()
    }
  },
  methods: {
    onSubmit(){
      this.$refs.form.validate(valid => {
        if(!valid){
          this.$message.error('请完善后再保存！')
          return
        }
        if(this.form.startTime > this.form.endTime) {
          this.$message.error('开始时间不能大于结束时间！')
          return
        }

        this.submitData()
      })
    },
    submitData() {
      const _this = this
      this.form.approval = 1
      if (this.form.id) {
        updateTraining(this.form).then(function (res) {
          if (res.code === 200) {
            _this.$alert('保存成功', '提示', {
              confirmButtonText: '确定',
              callback: function () {
                _this.$router.push({ path: '/skill' })
              }
            })
          } else {
            _this.$alert(res.msg, '提示', {
              confirmButtonText: '确定',
              callback: function () {}
            })
          }
        })
      } else {
        cvTraningAdd(this.form).then(function (res) {
          if (res.code === 200) {
            _this.$alert('添加成功', '提示', {
              confirmButtonText: '确定',
              callback: function () {
                _this.$router.push({ path: '/skill' })
              }
            })
          } else {
            _this.$alert(res.msg, '提示', {
              confirmButtonText: '确定',
              callback: function () {}
            })
          }
        })
      }
    },
    getpost: function () {
      const _this = this
      CVTrainingById({
        id: this.form.id
      }).then(function (res) {
        if (res.code === 200) {
          _this.form = res.data
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {}
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
@import "../../assets/css/member";
</style>
